<template>
  <div class="container">
    <div class="login-container">
      <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">
        <h3 class="title">滔刻后台系统登录</h3>
        <el-form-item prop="email">
          <span class="svg-container">
            <icon-svg icon-class="jiedianyoujian"></icon-svg>
          </span>
          <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <icon-svg icon-class="mima"></icon-svg>
          </span>
          <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="密码"></el-input>
        </el-form-item>
        <el-button type="primary" style="width:30%;" :loading="loading" @click.native.prevent="handleLogin">
          登录
        </el-button>
        <el-button style="width:30%;" :loading="loading" @click.native.prevent="handleRegister">
          注册
        </el-button>
        <!-- <el-form-item>
                          <el-button style="width:100%;" :loading="loading" @click.native.prevent="handleRegister">
                            注册
                          </el-button>
                        </el-form-item> -->
        <!-- <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
        <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div> -->
      </el-form>
      <!--扫描二维码登陆  -->
      <div class="card-box qr-box">
        <p class="sub-title">学员微信二维码登陆</p>
        <img class="qr" :src="sign_in.qr_url" alt="">
        <!-- <div class='tips'>学员第一次登陆请扫描二维码</div> -->
        <div class='tips'>学员注册后可扫描二维码登陆</div>
      </div>
  
      <img src="" alt="">
  
      <!-- <el-dialog title="第三方验证" :visible.sync="showDialog">
                          邮箱登录成功,请选择第三方验证
                          <social-sign></social-sign>
                        </el-dialog> -->
    </div>
  </div>
</template>

<script>
import { isWscnEmail } from 'utils/validate';
import socialSign from './socialsignin';

export default {
  components: { socialSign },
  name: 'login',
  created() {
    // this.getSignInQr();
  },
  mounted() {
    this.getSignInQr();
  },
  data() {
    const validateEmail = (rule, value, callback) => {
      if (!isWscnEmail(value)) {
        callback(new Error('请输入正确的合法邮箱'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'));
      } else {
        callback();
      }
    };
    return {
      sign_in: {
        qr_url: "",
        action_name: "",
        scene_str: "",
      },
      loginForm: {
        email: '',
        password: '',
        // qrUrl: this.Mock.Random.image('600x600', '#000', '#FFF', 'QR')
        qrUrl: "/static/pic/qr.png"
      },
      loginRules: {
        email: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { type: 'email', message: "用户名必须为合法的邮箱", trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePass }
        ]
      },
      loading: false,
      showDialog: false
    }
  },
  methods: {
    getQrUserInfo() {
      let vm = this;
      console.log(vm.$store)
      let urlAppend = `&do=getptSignInUserInfo&scene_str=${vm.sign_in.scene_str}`;
      vm.axios.post(vm.url.acid + urlAppend).then(function (res) {
        // console.log(res)
        if (res.data.status == 'success') {
          // console.log(vm.store)
          vm.$store
            .dispatch("setQrUserInfo", res.data.data)
            .then(res => {
              vm.$router.push({ path: "/" })
            }).catch(res => {
            })
        } else if (res.data.is_scan == 1) {
          //扫描了但是确是失败的，有可能是没有该用户或者没有绑定相应的openid
          vm.$message({
            type: 'error',
            message: res.data.msg
          });
          vm.getQrUserInfo();
        } else {
          //失败且未扫描
          vm.getQrUserInfo();
        }
      }).catch(function (res) {
        console.log(res)
        vm.getQrUserInfo();
      })
    },
    getSignInQr() {
      let vm = this;
      // if (vm.sign_in.qr_url != '') return;
      vm.axios.post(vm.url.acid + "&do=ptsigninqr").then(function (res) {
        console.log(res)
        if (res.data.status == 'success') {
          for (let key in res.data) {
            if (res.data[key] != '' && key != 'status') {
              vm.sign_in[key] = res.data[key];
            }
          }
          //获取用户信息
          vm.getQrUserInfo()
        } else {
          vm.getSignInQr();
        }
      }).catch(function (res) {
        vm.getSignInQr();
      })
    },
    //点击注册
    handleRegister() {
      this.$router.push({ path: '/register' })
    },
    handleLogin() {
      let vm=this;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          //通过验证
          this.loading = true;
          this.$store.dispatch('LoginByEmail', this.loginForm).then((res) => {
            console.log(res)
            console.log("通过登陆认证")
            this.loading = false;
            if (res.data.status == 'success') {
               vm.$message({
                type: 'success',
                message: "登陆成功~~"
              });
              this.$router.push({ path: '/' });
            } else {
              vm.$message({
                type: 'error',
                message: res.data.msg+"登陆错误"
              });
            }

            // this.showDialog = true;
          }).catch(() => {
            this.loading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    afterQRScan() {
      // const hash = window.location.hash.slice(1);
      // const hashObj = getQueryObject(hash);
      // const originUrl = window.location.origin;
      // history.replaceState({}, '', originUrl);
      // const codeMap = {
      //   wechat: 'code',
      //   tencent: 'code'
      // };
      // const codeName = hashObj[codeMap[this.auth_type]];
      // if (!codeName) {
      //   alert('第三方登录失败');
      // } else {
      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
      //     this.$router.push({ path: '/' });
      //   });
      // }
    }
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan);
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan);
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 5px;
}

.container {
  @include relative;
  height: 100vh;
  background-color: #2d3a4b;
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: #eeeeee;
    height: 47px;
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: #eeeeee;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .qr {
    width: 210px;
    height: 210px;
  }


  .login-container {
    position: absolute;
    width: 700px;
    left: 0;
    right: 0;
    margin: 120px auto;
  }
  .login-form {
    width: 400px;
    padding: 35px 35px 15px 35px;
    float: left;
  }
  .qr-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    /* padding-top: 40px; */
    margin-top: 40px;
    max-width: 300px;
    padding: 15px 25px;
    float: left;
  }
  .qr-box .sub-title {
    margin: 0px;
    line-height: 2rem;
    text-align: left;
    color: white;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  .forget-pwd {
    color: #fff;
  }
}
</style>
